<template>
  <div class="f-g f-c" style="height: 100%">
    <div style="overflow:auto;padding-bottom: 50px">
      <div class="header">
        <div class="title" style="margin-top: 24px">已{{ title}}的单位
          <el-form>
            <el-form-item style="text-align: right">
                <el-button type="primary" :disabled="!selectOptions2.length" @click="onBatchSend2">批量下发</el-button>
            </el-form-item>
        </el-form></div>
      </div>
        
      <div class="table-box">
        <el-table
          :data="deptList"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect2"
        >
            <el-table-column  type="selection" width="55px" label="序号" align="center" />
    
            <el-table-column v-for="item in columns2" :key="item.prop" :prop="item.prop" :label="item.label" align="center" />
          <el-table-column label="操作" fixed="right" width="180px">
            <template slot-scope="scope">
              <el-button type="danger" @click="onDeleteD(scope.row, scope.$index)">删除</el-button>
                <el-button type="primary" @click="onSend2(scope.row)">发送短信</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="header">
        <div class="title">已{{ title}}的参会专家
          <el-form>
            <el-form-item style="text-align: right">
                <el-button type="primary" :disabled="!selectOptions1.length" @click="onBatchSend1">批量下发</el-button>
            </el-form-item>
        </el-form></div>
      </div>
        
      <div class="table-box">
        <el-table
          :data="professorList"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect1"
        >
            <el-table-column type="selection" width="55px" label="序号" align="center" />
    
            <el-table-column v-for="item in columns1" :key="item.prop" :prop="item.prop" :label="item.label" align="center" />
          <el-table-column label="操作" fixed="right" width="180px">
            <template slot-scope="scope">
              <el-button type="danger" @click="onDeleteP(scope.row, scope.$index)">删除</el-button>
              <el-button type="primary" @click="onSend1(scope.row)">发送短信</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <div class="f-s" style="text-align: center;width: 100%;">
      <el-button type="primary" @click="onPre">上一步</el-button>
    </div>
    <InviteMsg
      ref="InviteMsgRef"
      :current-detail="detail"
      :professor-list="professorList"
      :dept-list="deptList"
      @success="onSuccess"
    />
  </div>
</template>

<script>
import InviteMsg from './invite-msg'
import { http } from '@/api'
export default {
  name: 'TotalList',
  components: {
    InviteMsg
  },
  props: {
    detail: Object,
      title: {
          type: String,
          default: '选择'
      }
  },
  data() {
    return {
      dialogValue: false,
      professorList: [],
      columns1: [
        { prop: 'expertName', label: '专家名称' },
        { prop: 'industryName', label: '行业' },
        { prop: 'industryExpertise', label: '专业特长' }
      ],
      deptList: [],
      columns2: [
        { prop: 'departName', label: '单位名称' },
        { prop: 'realName', label: '综合部主任' },
        { prop: 'mobile', label: '综合部主任联系方式' }
      ],
        selectOptions1: [],
        selectOptions2: [],
        type: ''
    }
  },
    created() {
        this.open()
    },
    methods: {
    open() {
      http.meeting_process.professor_accept(this.detail.id).then(res => {
        this.professorList = res.data
      })
      http.meeting_process.dept_accept(this.detail.id).then(res => {
        this.deptList = res.data
      })
      this.dialogValue = true
    },
    onPageBack() {
      this.$emit('get-page')
      this.dialogValue = false
    },
    onPre() {
      this.$emit('pre')
      this.dialogValue = false
    },
    onSendSmS() {
      this.$refs.InviteMsgRef.open()
    },
    onDeleteP(row, index) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          http.meeting_process.del_professor_accept({
            projectId: this.detail.id,
            expertId: row.id,
            status: 0
          }).then(res => {
            this.$message.success(res.msg)
            this.professorList.splice(index, 1)
          })
        })
    },
    onDeleteD(row, index) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          http.meeting_process.del_dept_accept({
            projectId: this.detail.id,
            expertId: row.id,
            status: 1
          }).then(res => {
            this.$message.success(res.msg)
            this.deptList.splice(index, 1)
          })
        })
    },
    onSuccess(codeTemple) {
        http.meeting_apply.invite({
            projectId: this.detail.id,
            type: this.type,
            ids: this.type === 1 ? this.selectOptions1.map(el => el.expertId) : this.selectOptions2.map(el => el.id),
            codeTemple: codeTemple
        }).then(res => {
            this.$message.success(res.msg)
            this.$refs.InviteMsgRef.dialogValue = false
        })
    },
        onSelect1(options) {
            this.selectOptions1 = options
        },
        onSelect2(options) {
            this.selectOptions2 = options
        },
        onBatchSend1() {
            this.type = 1
            this.onSendSmS()
        },
        onBatchSend2() {
            this.type = 2
            this.onSendSmS()
        },
        onSend1(row) {
           this.selectOptions1 = [row]
            this.type = 1
            this.onSendSmS()
        },
        onSend2(row) {
            this.selectOptions2 = [row]
            this.type = 2
            this.onSendSmS()
        }
  }
}
</script>

<style scoped lang="scss">
.title{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
